<template>
  <div>
    <div class="container">
      <el-form
        class="c_form"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="top"
      >
        <el-form-item
          :label="$t('寄修物流')"
          prop="logistics_name"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.logistics_name"
            :placeholder="$t('请输入寄修物流')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('寄修物流单号')"
          prop="logistics_no"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.logistics_no"
            :placeholder="$t('请输入寄修物流单号')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('姓名')" prop="take_name" class="c_form_item">
          <el-input
            v-model="ruleForm.take_name"
            :placeholder="$t('请输入您的姓名')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('电话')" prop="take_phone" class="c_form_item">
          <el-input
            v-model="ruleForm.take_phone"
            :placeholder="$t('请输入您的联系电话')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('地址')"
          prop="take_address"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.take_address"
            :placeholder="$t('请输入您的收货地址')"
          ></el-input>
        </el-form-item>
        <div class="c_info">
          <span class="c_info_x">*</span>
          <span>{{ $t("维修完成后将按此联系方式寄出") }}</span>
        </div>
      </el-form>
      <div class="c_button_view">
        <el-button class="c_button" @click="submitForm">{{
          $t("下一步2")
        }}</el-button>
      </div>
    </div>
    <div class="container_mobile">
      <el-form
        class="c_form"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="top"
      >
        <el-form-item
          :label="$t('寄修物流')"
          prop="logistics_name"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.logistics_name"
            :placeholder="$t('请输入寄修物流')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('寄修物流单号')"
          prop="logistics_no"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.logistics_no"
            :placeholder="$t('请输入寄修物流单号')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('姓名')" prop="take_name" class="c_form_item">
          <el-input
            v-model="ruleForm.take_name"
            :placeholder="$t('请输入您的姓名')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('电话')" prop="take_phone" class="c_form_item">
          <el-input
            v-model="ruleForm.take_phone"
            :placeholder="$t('请输入您的联系电话')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('地址')"
          prop="take_address"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.take_address"
            :placeholder="$t('请输入您的收货地址')"
          ></el-input>
        </el-form-item>
        <div class="c_info">
          <span class="c_info_x">*</span>
          <span>{{ $t("维修完成后将按此联系方式寄出") }}</span>
        </div>
      </el-form>
      <div class="c_button_view">
        <el-button class="c_button" @click="submitForm">{{
          $t("下一步2")
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!/^[1][3,4,5,6.7,8,9][0-9]{9}$/.test(value)) {
        return callback(new Error(this.$t("请输入正确的联系电话")));
      } else {
        callback();
      }
    };
    var checkStr = (rule, value, callback) => {
      if (!/[a-zA-Z0-9]/.test(value)) {
        return callback(new Error(this.$t("请填写正确的寄修物流单号")));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        logistics_name: "",
        logistics_no: "",
        take_name: "",
        take_phone: "",
        take_address: "",
      },
      rules: {
        logistics_name: [
          {
            required: true,
            message: this.$t("请输入寄修物流"),
            trigger: "blur",
          },
        ],
        logistics_no: [
          {
            required: true,
            validator: checkStr,
            trigger: "blur",
          },
        ],
        take_name: [
          {
            required: true,
            message: this.$t("请输入您的姓名"),
            trigger: "blur",
          },
        ],
        take_phone: [
          {
            required: true,
            validator: checkPhone,
            trigger: "blur",
          },
        ],
        take_address: [
          {
            required: true,
            message: this.$t("请输入您的收货地址"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("next", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container {
    display: block;
  }
  .container_mobile {
    display: none;
  }
  .c_form {
    padding: 0 240rem;

    .c_form_item {
      margin-top: 86rem;
    }

    .c_info {
      margin-top: 28rem;
      font-size: 22rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      .c_info_x {
        color: #f56c6c;
      }
    }
  }

  .c_button_view {
    display: flex;
    justify-content: center;
    margin: 200rem 0;

    .c_button {
      width: 600rem;
      height: 100rem;
      background: #333333;
      border-radius: 20rem;
      font-size: 30rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
@media (max-width: 900px) {
  .container {
    display: none;
  }
  .container_mobile {
    display: block;
  }
  .c_form {
    padding: 0 10px;

    .c_form_item {
      margin-top: 30px;
    }

    .c_info {
      margin-top: 16px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;

      .c_info_x {
        color: #f56c6c;
      }
    }
  }

  .c_button_view {
    display: flex;
    justify-content: center;
    margin: 20px 0;

    .c_button {
      width: 300px;
      height: 44px;
      background: #333333;
      border-radius: 7px;
      font-size: 15px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fefefe;
    }
  }
  :deep(.el-input__inner) {
    height: 40px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
  }
  :deep(.el-form-item__label) {
    text-align: right;
    vertical-align: middle;
    font-size: 13px;
    color: #333333;
    line-height: 30px;
    box-sizing: border-box;
  }
}
</style>
<style>
@media (min-width: 900px) {
  .el-input__inner {
    height: 80rem;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 20rem;
  }

  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 30rem;
    color: #333333;
    line-height: 50rem;
    padding: 0 12rem 0 0;
    box-sizing: border-box;
  }
}
</style>
